<template>
  <div>
    <el-dialog append-to-body :title="`${isEdit ? '编辑' : '创建'}案件`" width="60%" top="5vh" :visible="visible" @close="handleClose">
      <div style="max-height: 650px; overflow: auto" class="beautify-scroll">
        <el-form :model="form" :rules="rules" ref="form" label-width="140px" label-suffix="：">
          <div class="white-card">
            <el-form-item label="案件来源" prop="itemSource">
              <el-select v-model="form.itemSource" placeholder="请选择" filterable clearable>
                <template v-for="item in itemSourceArr">
                  <el-option v-if="item.id !== 0" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <moduleHead title="投诉举报人基本资料"></moduleHead>
            <template>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="联系人" prop="createUsername">
                    <el-input v-model="form.createUsername" placeholder="请填写" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证号" prop="idNumber">
                    <el-input v-model="form.idNumber" placeholder="请填写"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model="form.mobile" placeholder="请填写"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请填写"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属行业" prop="industryType">
                    <el-select v-model="form.industryType">
                      <el-option v-for="item in industryTypeDictList" :key="item.id" :label="item.name" :value="item.name">{{ item.name }}</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请填写受委托企业名称"></el-input>
              </el-form-item>
              <el-form-item label="统一社会信用代码" prop="socialCreditNumber">
                <el-input v-model="form.socialCreditNumber" placeholder="请填写受委托企业编码"></el-input>
              </el-form-item> -->
            </template>
            <el-form-item label="是否授权" prop="auth">
              <el-switch v-model="form.auth"></el-switch>
              若您代表企业进行投诉，且联系人非法定代表人，请选择是
            </el-form-item>
            <template v-if="form.auth">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="委托人" prop="mandator">
                    <el-input v-model="form.mandator" placeholder="请填写委托人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="统一社会信用代码" prop="socialCreditNumber" label-width="170px">
                    <el-input v-model="form.socialCreditNumber" placeholder="请填写"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="mandatorPhone">
                    <el-input v-model="form.mandatorPhone" placeholder="请填写委托人联系电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="通讯地址" prop="companyAddress">
                    <el-input v-model="form.companyAddress" placeholder="请填写通讯地址"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="身份证" prop="clientIdCardList">
                <upload-input :file-list="form.clientIdCardList" :size="20" limitNum="2" tipsText="委托人身份证人像面和国徽面，上传的附件大小不能超过20M"></upload-input>
              </el-form-item>
              <el-form-item label="授权委托书" prop="attachmentList">
                <upload-input :file-list="form.attachmentList" :size="50" limitNum="10" tipsText="请按照填报要求提供授权委托书资料，上传的附件大小不能超过50M，附件类型支持图片，视频，文档，压缩包等格式文件。"></upload-input>
              </el-form-item>
            </template>

            <moduleHead title="投诉对象基本资料"></moduleHead>
            <el-row>
              <el-col :span="12">
                <el-form-item label="事发地" prop="addressId">
                  <!-- :popper-class="departmentTreeLoading && 'loading'" -->
                  <el-cascader
                    style="width: 100%"
                    ref="areaCascader"
                    v-model="form.addressId"
                    :props="{ children: 'subList', label: 'name', value: 'id', expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
                    :options="areas"
                    :show-all-levels="false"
                    @change="$refs.areaCascader && $refs.areaCascader.toggleDropDownVisible(false)"
                  />
                  <!-- @change="$refs.areaCascader && $refs.areaCascader.toggleDropDownVisible(false)" -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投诉对象" prop="addressDepartmentCode">
                  <!-- :popper-class="departmentTreeLoading && 'loading'" -->
                  <el-cascader
                    ref="departmentCascader"
                    v-model="form.addressDepartmentCode"
                    :props="{ children: 'children', label: 'name', value: 'deptCode', expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
                    :options="departmentTree"
                    :show-all-levels="false"
                    @change="$refs.departmentCascader && $refs.departmentCascader.toggleDropDownVisible(false)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人" prop="complaintContactName">
                  <el-input v-model="form.complaintContactName" placeholder="请填写" maxlength="40"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="complaintContactMobile">
                  <el-input v-model="form.complaintContactMobile" placeholder="请填写" maxlength="11"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <moduleHead title="案件基本信息"></moduleHead>
            <el-form-item label="案件名称" prop="title">
              <el-input v-model="form.title" placeholder="请填写投诉举报标题" maxlength="40" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="案件类型" prop="itemDetailId">
              <el-select v-model="form.itemDetailId" placeholder="请选择">
                <!-- <el-option label="全部" value=""></el-option> -->
                <el-option-group v-for="group in itemdetailTree" :key="group.label" :label="group.label">
                  <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="主要诉求" prop="mainApply">
              <el-input v-model="form.mainApply" show-word-limit maxlength="200" :placeholder="`请填写主要诉求`" type="textarea" :autosize="{ minRows: 3 }"></el-input>
            </el-form-item>
            <el-form-item label="事实理由" prop="factReason">
              <el-input v-model="form.factReason" show-word-limit maxlength="1000" :placeholder="`请填写事实理由`" type="textarea" :autosize="{ minRows: 3 }"></el-input>
            </el-form-item>
            <el-form-item label="佐证材料" prop="supportAttachmentList">
              <upload-input :file-list="form.supportAttachmentList" :size="50" limitNum="10"></upload-input>
            </el-form-item>
            <el-form-item label="拖欠账款" prop="isArrear">
              <el-switch v-model="form.isArrear"></el-switch>
            </el-form-item>
            <template v-if="form.isArrear">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="合同金额" prop="contractAmount">
                    <el-input-number v-model="form.contractAmount" :controls="false" :min="0" :precision="2"></el-input-number>
                    <span class="f18">&nbsp;&nbsp;万元</span>
                  </el-form-item>
                </el-col>
                <!--  2位小数，共18位。单位为：“万元”，如20.00表示20万元。 -->
                <el-col :span="12">
                  <el-form-item label="欠款金额" prop="arrearsAmount">
                    <el-input-number v-model="form.arrearsAmount" :controls="false" :min="0" :precision="2"></el-input-number>
                    <span class="f18">&nbsp;&nbsp;万元</span>
                    <!-- <div class="color-danger">2位小数，单位为：“万元”，如20.00表示20万元。</div> -->
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="合同协议名称" prop="contractName">
                    <el-input v-model="form.contractName" show-word-limit :placeholder="`请填写合同协议名称`"></el-input>
                  </el-form-item>
                </el-col>
                <!--  2位小数，共18位。单位为：“万元”，如20.00表示20万元。 -->
                <el-col :span="12">
                  <!-- TODO 改成签订时间 -->
                  <!--  <el-form-item label="合同协议编码" prop="contractCode">
                    <el-input v-model="form.contractCode" show-word-limit :placeholder="`请填写合同协议编码`"></el-input>
                  </el-form-item> -->
                  <el-form-item label="签订时间" prop="signTime">
                    <el-date-picker v-model="form.signTime" type="date" placeholder="请选择签订时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="主要违约条款" prop="defaultClause">
                <el-input v-model="form.defaultClause" show-word-limit maxlength="1000" :placeholder="`请填写合同协议主要违约条款`" type="textarea" :autosize="{ minRows: 3 }"></el-input>
              </el-form-item>
            </template>
            <!-- <div class="module-head">其他信息</div>
            <el-form-item label="案件来源" prop="itemSource">
              <el-select v-model="form.itemSource" placeholder="请选择">
                <template v-for="item in itemSourceArr">
                  <el-option v-if="item.id !== 0" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="案件抄送：">
              <el-checkbox v-model="form.checked">案件抄送以下单位：</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <div style="display: flex; justify-content: space-between">
                <el-cascader ref="cascader2" :props="{ label: 'name', value: 'code', expandTrigger: 'hover', emitPath: false, checkStrictly: true }" :options="departmentTree2" v-model="form.dept" :show-all-levels="false"></el-cascader>
                <el-button type="primary" @click="onAdd" icon="el-icon-plus">添加抄送部门</el-button>
              </div>
            </el-form-item>
            <el-table v-if="departments.length" :data="departments">
              <el-table-column type="index" label="编号" width="180"></el-table-column>
              <el-table-column prop="name" label="单位名称" width="180"></el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="row">
                  <el-button style="flex-shrink: 0; margin-left: 10px" @click="onDel(row.$index)" type="text" plain>取消抄送</el-button>
                </template>
              </el-table-column>
            </el-table> -->
          </div>
        </el-form>
      </div>
      <!-- style="margin-bottom: 30px" -->
      <div class="split"></div>

      <div class="dialog-footer-btn">
        <el-button @click="handleClose" type="primary" plain>关闭</el-button>

        <el-button v-if="!isEdit" @click="handleSave" :disabled="submitting || saving" :loading="saving" type="primary">保存</el-button>
        <el-button @click="handleSubmit" :disabled="submitting || saving" :loading="submitting" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL"></previewDialog>
  </div>
</template>

<script>
import { dict2Array, mergeLeft, removeEmptyWithTree, order } from "@/utils/common";
import { workOrderPublicIntentionDict, workOrderEventSourceDict, workOrderCreatorTypeDict, workOrderComplaintObjectType, workOrderComplaintObjectTypeDict, workOrderEventSourceDictOrder } from "@/utils/dict";
import { extensionName, filename, txt2HTML } from "@/utils/filters";
import * as workOrderApi from "@/api/workOrder/index";
import * as mattersApi from "@/api/matters";
import * as validators from "@/utils/validators";
import * as minix from "@/utils/mixins.js";
import * as dictApi from "@/api/dict";
import previewDialog from "@/views/workOrder/components/previewDialog";
import upload from "@/components/upload";
import * as administrativeDivisionAPI from "@/api/administrativeDivision";
import { mapState } from "vuex";
import { department2Tree, forEachTree, itemdetail2GroupOptions } from "@/utils/common";
import uploadInput from "@/components/uploadInput/uploadInput.vue";
const form = {
  createType: 1,
  checked: false,
  dept: "",
  title: "",
  itemSource: "",
  createUsername: "",
  idNumber: "",
  mobile: "",
  email: "",
  companyName: "",
  socialCreditNumber: "",
  companyContactName: "",
  companyContactIdNum: "",
  companyAddress: "",
  auth: false,
  mandator: "",
  addressId: "",
  addressDepartmentCode: "",
  addressDepartmentName: "",
  complaintContactName: "",
  complaintContactMobile: "",
  mainApply: "",
  factReason: "",
  isArrear: false,
  contractName: "",
  contractCode: "",
  signTime: "",
  defaultClause: "",
  arrearsAmount: undefined,
  contractAmount: undefined,
  itemDetailId: "",
  pushDepartmentCode: "",
  pushDepartmentName: "",
  clientIdCardList: [],
  attachmentList: [],
  supportAttachmentList: [],
  industryType: undefined,
};

export default {
  name: "createWorkOrderDialog",
  mixins: [minix.loading, minix.dialog, minix.form],
  components: { previewDialog, upload, uploadInput },
  filters: { extensionName, filename },
  props: {
    visible: { type: Boolean, default: false },
    isEdit: { type: Boolean, default: false },
    details: { type: Object, default: Object },
  },
  data() {
    return {
      itemdetailTree: [],
      loading: false,
      submitting: false,
      saving: false,
      selectedNode: {},
      publicIntentionArr: dict2Array(workOrderPublicIntentionDict),
      creatorTypeArr: dict2Array(workOrderCreatorTypeDict, false, Number),
      complaintObjectTypeArr: dict2Array(workOrderComplaintObjectTypeDict),
      itemSourceArr: order(workOrderEventSourceDictOrder, dict2Array(workOrderEventSourceDict, false, Number)),
      form: {
        ...form,
      },
      rules: {
        itemSource: [{ required: true, message: "请选择" }],
        title: [{ required: true, message: "请填写" }, { validator: validators.limitMax(40) }],
        createUsername: [{ required: true, message: "请填写" }, { validator: validators.limitMax(100) }],
        itemDetailId: [{ required: true, message: "请选择" }],
        idNumber: [{ required: true, message: "请填写" }],
        complaintContactMobile: [{ validator: validators.phone() }],
        mobile: [{ required: true, message: "请填写" }, { validator: validators.phone() }],
        mandatorPhone: [{ required: true, message: "请填写" }, { validator: validators.phone() }],
        email: [{ required: true, message: "请填写" }, { validator: validators.email() }],
        addressId: [{ required: true, message: "请选择" }],
        addressDepartmentCode: [{ required: true, message: "请选择" }],
        mandator: [{ required: true, message: "请填写" }],
        socialCreditNumber: [{ required: true, message: "请填写" }],
        companyAddress: [{ required: true, message: "请填写" }],
        attachmentList: [{ required: true, message: "请上传" }],
        mainApply: [{ required: true, message: "请填写" }],
        factReason: [{ required: true, message: "请填写" }],
        contractName: [{ required: true, message: "请填写" }],
        contractCode: [{ required: true, message: "请填写" }],
        signTime: [{ required: true, message: "请选择" }],
        defaultClause: [{ required: true, message: "请选择" }],
        arrearsAmount: [{ required: true, message: "请填写" }],
        contractAmount: [{ required: true, message: "请填写" }],
        industryType: [{ required: true, message: "请选择" }],

        clientIdCardList: [{ required: true, message: "请上传" }, { validator: (rule, value, callback) => (value.length ? callback() : callback(new Error("请上传"))) }],
        supportAttachmentList: [{ required: true, message: "请上传" }, { validator: (rule, value, callback) => (value.length ? callback() : callback(new Error("请上传"))) }],
      },
      uploading: false,
      areas: [],
      city: [],
      hasError: true,
      departmentTree: [],
      departmentTreeLoading: false,
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      departmentTree2: [],
      departments: [],
      industryTypeDictList: [],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    location() {
      return window.location || {};
    },
  },

  watch: {
    visible(val) {
      if (val) {
        if (this.isEdit) {
          for (const key of Object.keys(this.form)) {
            this.form[key] = this.details[key];
          }
          this.form.isDebt = Boolean(this.details.debtAmount);
          // this.form.wordAttachmentList = this.details.wordAttachmentList.map(({ fileName, fileUrl }) => ({ fileName, fileUrl }));
          // this.form.supportAttachmentList = this.details.supportAttachmentList.map(({ fileName, fileUrl }) => ({ fileName, fileUrl }));
          this.selectedNode.name = this.details.itemDetailName;
          this.selectedNode.acceptDepartment = this.details.acceptDepartment;
          this.selectedNode.deadline = this.details.deadline;
          // this.form.createType = Boolean(this.form.companyContactIdNum) ? 1 : 0
          this.$nextTick(() => {});
        } else {
          this.form.attachmentList = [];
          this.form.supportAttachmentList = [];
          this.fetchTemporaryStorage().then((res) => {
            if (res) {
            }
          });
        }
      }
    },
    // form: {
    //   handler() {
    //     this.$nextTick(function(){
    //       if(this.$refs.form){
    //         this.$refs.form.validate((valid) => {
    //           if (valid) {
    //             this.hasError=false
    //           } else {
    //             this.hasError=true
    //             return false;
    //           }
    //         });
    //       }

    //     })
    //   },
    //   immediate: true,
    //   deep: true
    // },
    "form.addressId"(addressId) {
      administrativeDivisionAPI
        .departByAddress({ addressId })
        .then((r) => {
          let data = JSON.parse(JSON.stringify(r.result)) || [];
          removeEmptyWithTree(data);
          const arr = data.filter((item) => {
            return item && item.id;
          });
          this.departmentTree = arr;
        })
        .finally(() => {
          this.departmentTreeLoading = false;
        });
    },
  },
  created() {
    this.getDictList();
  },
  methods: {
    txt2HTML,
    getDictList() {
      dictApi
        .list({ parentCode: "1007" })
        .then((res) => {
          this.industryTypeDictList = res.result;
        })
        .finally(() => {});
    },
    onDel(index) {
      this.departments.splice(index, 1);
    },
    onAdd() {
      const node = this.$refs.cascader2.getCheckedNodes()[0];
      if (node) {
        const existNode = this.departments.find((a) => a.code === node.data.code);
        if (existNode) {
          existNode.del = false;
        } else {
          this.departments.push({
            name: node.data.name,
            code: node.data.code,
            new: true,
            del: false,
          });
        }
        this.$refs.cascader2.handleClear();
      }
    },
    show() {
      workOrderApi.all.departmentTree().then((res) => {
        this.departmentTree2 = forEachTree(department2Tree(res.result, false), (a) => {
          if (a.code === this.userInfo.orgCode) {
            a.disabled = true;
          }
        });
      });
      mattersApi.itemdetailTree().then((res) => {
        this.itemdetailTree = itemdetail2GroupOptions(res.result);
      });
      workOrderApi.distribute.area().then((res) => {
        this.areas = [res.result];
      });
    },
    fetchTemporaryStorage() {
      return workOrderApi.distribute
        .getTemporaryStorage()
        .then((res) => {
          const result = res.result;
          if (result) {
            this.form = mergeLeft(this.form, result);
            this.form.createType = 1;
            this.form.id = result.id;
            this.form.supportAttachmentList = result.questionMainInfo ? result.questionMainInfo.wordAttachmentList : [];
            this.form.attachmentList = result.complainPersonMainInfo ? result.complainPersonMainInfo.attachmentList : [];
            this.form.checked = JSON.parse(result.checked);
            this.form.dept = result.dept;
            this.form.title = result.title;
            this.form.itemSource = result.itemSource;
            this.form.createUsername = result.createUsername;
            this.form.addressId = result.addressId;
            this.form.addressDepartmentCode = result.addressDepartmentCode;
            this.form.itemDetailId = result.itemDetailId;
            this.form.pushDepartmentCode = result.pushDepartmentCode;
            this.form.pushDepartmentName = result.pushDepartmentName;
            this.form.idNumber = result.complainPersonMainInfo ? result.complainPersonMainInfo.idNumber : "";
            if (result.complainPersonMainInfo) {
              this.form.mobile = result.complainPersonMainInfo.mobile;
              this.form.email = result.complainPersonMainInfo.email;
              this.form.companyName = result.complainPersonMainInfo.companyName;
              this.form.socialCreditNumber = result.complainPersonMainInfo.socialCreditNumber;
              this.form.companyContactName = "";
              this.form.companyContactIdNum = "";
              this.form.companyAddress = result.complainPersonMainInfo.companyAddress;
              this.form.auth = JSON.parse(result.complainPersonMainInfo.auth);
              this.form.mandator = result.complainPersonMainInfo.mandator;
              this.form.mandatorPhone = result.complainPersonMainInfo.mandatorPhone;
            }
            if (result.complainant) {
              this.form.addressDepartmentName = result.complainant.addressDepartmentName;
              this.form.complaintContactName = result.complainant.complaintContactName;
              this.form.complaintContactMobile = result.complainant.complaintContactMobile || "";
            }
            if (result.questionMainInfo) {
              this.form.mainApply = result.questionMainInfo.mainApply;
              this.form.factReason = result.questionMainInfo.factReason;
              this.form.isArrear = JSON.parse(result.questionMainInfo.isArrear);
              this.form.contractName = result.questionMainInfo.govArrears.contractName;
              this.form.contractCode = result.questionMainInfo.govArrears.contractCode;
              this.form.defaultClause = result.questionMainInfo.govArrears.defaultClause;
              this.form.arrearsAmount = result.questionMainInfo.govArrears.arrearsAmount;
              this.form.contractAmount = result.questionMainInfo.govArrears.contractAmount;
              this.form.signTime = result.questionMainInfo.govArrears.signTime;
            }
            this.departments = [];
            var arr = result.pushDepartmentCode.split(";");
            arr.forEach((item, index) => {
              var name = "";
              forEachTree(department2Tree(this.departmentTree2, false), (a) => {
                if (item === a.code) {
                  name = a.name;
                }
              });
              // console.log(name, "name---------");
              this.departments.push({
                name: name,
                code: item,
                new: true,
                del: false,
              });
            });
          }
        })
        .finally(() => {});
    },

    getEventSource() {
      return dictApi.list({ parentCode: "1001" }).then((res) => {
        this.eventSourceArr = res.result;
      });
    },
    getCities() {
      if (this.area.length && this.form.addressArea) {
        for (const item of this.area) {
          if (item.name === this.form.addressArea) {
            return item.subList;
          }
        }
      }
      return [];
    },
    generateFormData() {
      const form = { ...this.form };

      const areaCascaderSelected = this.$refs.areaCascader.getCheckedNodes(false)[0];
      if (areaCascaderSelected) {
        form.address = areaCascaderSelected.data.name;
      }

      if (this.isEdit) {
        form.id = this.details.id;
        form.workOrderNo = this.details.workOrderNo;
      }

      const departmentCascaderSelected = this.$refs.departmentCascader.getCheckedNodes(false)[0];
      if (departmentCascaderSelected) {
        form.addressDepartmentName = departmentCascaderSelected.data.name;
      }
      if (this.form.checked) {
        form.pushDepartmentCode = this.departments.map((a) => a.code).join(";");
        form.pushDepartmentName = this.departments.map((a) => a.code).join(";");
      }
      return form;
    },

    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const form = this.generateFormData();
          this.saving = true;

          workOrderApi.distribute
            .temporaryStorage(form)
            .then((res) => {
              this.form.id = res.result;
              this.$message.success("保存成功");
            })
            .finally(() => {
              this.saving = false;
            });
        } else {
          return false;
        }
      });
    },

    handleSubmit() {
      this.validateAndConfirm("form", "请您核实填写信息是否准确，点击“确认”将无法修改信息内容，是否确认提交？")
        .then(() => {
          const form = this.generateFormData();
          this.submitting = true;
          return this.isEdit ? workOrderApi.distribute.modify(form) : workOrderApi.distribute.add(form);
        })
        .then((res) => {
          this.$emit("success");
          this.handleClose();
        })
        .finally(() => {
          this.submitting = false;
        });
    },
    handleClose() {
      this.form = { ...form };
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.row {
  height: 20px;
  overflow: hidden;

  & > div {
    margin-bottom: 10px;

    &:first-child {
      flex: 1;
      display: flex;
      align-items: center;

      & > div {
        flex: 1;
      }
    }
  }
  .row {
    margin-left: 26px;

    span {
      line-height: 20px;
    }
  }

  & > .row > .row {
    display: flex;
    //& > div {
    //
    //}
  }
}
.el-select,
.el-input,
.el-cascader {
  width: 100%;
}
</style>
